<template>
    <div>
        <div class="top" v-show="xs">
            <van-icon name="arrow-left" @click="fanhui" />
            <van-search v-model="value" show-action placeholder="请输入搜索关键词" @search="onSearch">
                <template #action>
                    <div @click="onClickButton">搜索</div>
                </template>
            </van-search>

        </div>
        <p v-for="item in lll" @click="hotclick(item.keyword)" :key="item.wordid" v-show="xs">{{ item.keyword }}</p>
        <div v-show="!xs">
            <div class="top">
                <van-icon name="arrow-left" @click="fanhui" />
                <van-search v-model="value" show-action placeholder="请输入搜索关键词" @search="onSearch">
                    <template #action>
                        <div @click="onClickButton">搜索</div>
                    </template>
                </van-search>
            </div>


            <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
                <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
                    <!-- <van-cell v-for="item in spArr" :key="item.proid" :title="item.name" /> -->
                    <ul>
                        <li v-for="item in spArr" :key="item.proid" @click="goxiang(item.proid)">
                            <img :src="item.img1" alt="">
                        </li>
                    </ul>
                </van-list>
            </van-pull-refresh>


        </div>
    </div>
</template>

<script setup lang='ts'>
import router from '@/router';
import { onMounted, ref } from 'vue';
import { Search, hotsearch } from '@/api/http';
let value: any = ref()
const spArr: any = ref([])
const onClickButton = () => {

}
const list = ref([]);
const loading = ref(false);
const finished = ref(false);
const count: any = ref(1)
const xs: any = ref(true)
const refreshing = ref(false);
// 搜索框的搜索事件
const onSearch = () => {
    xs.value = false
    // Search({ count: count.value++, limitNum: 10, keyword: value.value }).then((res: any) => {
    //     console.log('搜索出来的数据', res);
    //     if (res.code == '200') {
    //         spArr.value = spArr.value.concat(res.data)
    //     }
    // })
    onLoad()
}
const onLoad = () => {
    // 异步更新数据
    // setTimeout 仅做示例，真实场景中一般为 ajax 请求
    Search({ count: count.value++, limitNum: 10, keyword: value.value }).then((res: any) => {
        console.log('搜索出来的数据', res);
        if (refreshing.value) {  // 当下拉刷新的时候
            count.value = 1
            spArr.value = []; // 清空列表数组
            refreshing.value = false; // 重新设置下拉状态为false
        }
        if (res.code == '200') {
            spArr.value = spArr.value.concat(res.data)
            console.log(spArr.value);
            // 加载状态结束
            loading.value = false;
            // 数据全部加载完成
            if (spArr.value.length < 10) {
                finished.value = true;
            }
        }
        else {
            // loading.value = false;

            finished.value = true;
        }

    })
};
const onRefresh = () => {
    // 清空列表数据
    finished.value = false;
    // 重新加载数据
    // 将 loading 设置为 true，表示处于加载状态
    loading.value = true;
    onLoad();
};
// 返回上一页
const fanhui = () => {
    router.push('/home')
}
//这个是生命周期
const lll: any = ref([])
onMounted(() => {
    hotsearch({}).then(res => {
        console.log('这里是热门搜索的数据', res);
        lll.value = res.data

    })
})
const hotclick = (item: any) => {
    xs.value = false
    value.value = item
    onLoad()

}
// 跳转到详情页
const goxiang = (id: any) => {
    router.push({ path: '/xq', query: { id: id } })
}
</script>
<style lang="scss" scoped>
.top {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .van-search {
        flex: 1;
    }
}

ul {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin-top: 10px;

    li {
        width: 50%;
        // height: 220px;
        display: flex;
        // margin-top: 1px;
        flex-direction: column;
        justify-content: center;

        // align-items: center;
        img {
            width: 168px;
            height: 168px;
        }

        p {
            -webkit-line-clamp: 2;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        h5 {
            color: orange;
            margin: 0;
        }

    }
}
</style>